<template>
  <lay-container fluid="true" style="padding: 10px; height: calc(100% - 20px)">
      <lay-row space="10">
        <lay-quote size="sm">
          <span> 场景[{{current_scene_name}}]执行记录 </span>
        </lay-quote>
      </lay-row>
      <lay-row space="10">
        <lay-col md="24">
            <lay-table
              height="450px"
              :page="page"
              :columns="columns"
              :loading="loading"
              id="id"
              :dataSource="dataSources"
              v-model:selectedKeys="selectedKeys"
              :checkbox="checkbox"
              @change="changePage"
            >
              <template v-slot:sql="{ data }">
                <p style="color: #1E9FFF" @click="viewSql(data)">
                    <lay-icon type="layui-icon-at" size="xs"></lay-icon>{{ data.sql }}
                </p>
              </template>
            </lay-table>
        </lay-col>
        <lay-col></lay-col>
      </lay-row>
  </lay-container>
</template>

<script lang="ts">
export default {
  name: "ActRecord"
}
</script>

<script lang="ts" setup>

import {h, onBeforeMount, reactive, ref} from "vue";
import {layer} from "@layui/layer-vue";
import {useRoute} from "vue-router";
import {queryRecordApi, queryRecordCountApi, viewRecordSqlApi} from "../../../../api/module/scene";
import {notify} from "../../../../untils/tip";
import {viewSql} from "../../../../store/databases/CommonFunction";


const route = useRoute();
const node: any = reactive({data: {scene_id: '', scene_name: ''}})

onBeforeMount(() => {
    node.data = route.params;
    console.log('node:', node);
    getRecordCount();
    getSceneRecord();
})


const selectedKeys = ref(["1"]);
const checkbox = ref(true);
const page = reactive({ current: 1, limit: 10, total: 10 });


const columns = ref([
    {"title": "ID", "width": "5%", "key": "id", "fixed": "left"},
    {"title": "状态", "width": "15%", "key": "status"},
    {"title": "执行人", "width": "15%", "key": "execute_user"},
    {"title": "执行时间", "width": "20%", "key": "execute_time"},
    {"title": "目标库", "width": "25%", "key": "database"},
    {"title": "执行SQL", "width": "20%", "key": "sql", "customSlot": "sql"}
]);

const dataSources = ref([]);
const loading = ref(false);

const getRecordCount = async () => {
  let {result, status, message} = await queryRecordCountApi({scene_id: node.data.scene_id});
  if(status === 'success'){
      page.total = result.total;
  }else {
      notify(status, message);
  }
};

const changePage = () => {
    loading.value = true;
    setTimeout(() => {
      getSceneRecord();
      loading.value = false;
    }, 500);
};

const current_scene_name = ref('');

const getSceneRecord = async () => {
  const queryForm: any = reactive({scene_id: node.data.scene_id});
  queryForm.current = page.current;
  queryForm.limit = page.limit;
  let {result, status, message} = await queryRecordApi(queryForm);
  if(status === 'success'){
    dataSources.value = result.data_source;
    current_scene_name.value = result.scene_name;
  }else {
    layer.msg(message);
  }
};

</script>

<style scoped>

</style>